<template>
  <view class="content">
    <!--  -->
    <view class="content_top">

      <!-- #ifdef APP-PLUS -->
      <view class="back" :style="{top: statusBarHeight + 'px'}" @click="backClick()"></view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="back" style="top:35px" @click="backClick()"></view>
      <!-- #endif -->

      <!-- <view class="user_content_face" :style="{'backgroundImage':'url('+ userImage +')' }"></view> -->
      <img class="face" :src="userImage">
      <view class="sign" v-if="list.status == 2">
        <image :src="list.level" mode="widthFix"></image>
      </view>
      <view class="sign" v-else>
        未激活
      </view>
      <!-- <view class="name">{{name}}</view> -->
      <view class="phone">{{phone}}</view>
      <view class="notice" @click="$ui.push('/pages/mine/notice/index')"></view>
      <view class="threeitem">
        <view class="rightitem3">
          <view class="item3" @click="$ui.push('/pages/differential/differential2')">
            <view class="text1">TDC</view>
            <view class="text2">{{list.coin}}</view>
          </view>
          <view class="item3" @click="$ui.push('/pages/differential/differential')">
            <view class="text1">积分</view>
            <view class="text2">{{list.balance}}</view>
          </view>
          <view class="item3" @click="$ui.push('/pages/mine/assets/totalassets')">
            <view class="text1">总资产</view>
            <view class="text2">{{list.balance}}</view>
          </view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="list">
      <view class="leftname">我的订单</view>
      <view class="rightname">抢购订单</view>
      <view class="item5list">
        <view class="item" @click="recordOneClick">
          <view class="logo">
            <view class="Icon Icon1">

            </view>
            <view class="span_jishu" v-if="button.qg != 0">
              {{button.qg}}
            </view>
          </view>
          <view class="text">
            抢购记录
          </view>
        </view>
        <view class="item" @click="$ui.push('/pages/mine/transfer_record')">
          <view class="logo">
            <view class="Icon Icon2">

            </view>
            <view class="span_jishu" v-if="button.zr != 0">
              {{button.zr}}
            </view>
          </view>
          <view class="text">
            转让记录
          </view>
        </view>
        <view class="item" @click="$ui.push('/pages/mine/my_yvyue')">
          <view class="logo">
            <view class="Icon Icon3">

            </view>
            <view class="span_jishu" v-if="button.yy != 0">
              {{button.yy}}
            </view>
          </view>
          <view class="text">
            预约记录
          </view>
        </view>
        <view class="item" @click="$ui.push('/pages/shop/shoporder')">
          <view class="logo">
            <view class="Icon Icon4">

            </view>
          </view>
          <view class="text">
            商城订单
          </view>
        </view>
        <view class="item" @click="$ui.push('/pages/mine/kuangji/index')">
          <view class="logo">
            <view class="Icon Icon5">

            </view>
          </view>
          <view class="text">
            矿机订单
          </view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="menulist">
      <view class="menulistitem1">
        <view class="text">常用功能</view>
      </view>
      <view class="menulistitem" @click="$ui.push('/pages/mine/pay_term/index')">
        <view class="Icon Icon1"></view>
        <view class="name">
          我的钱包
        </view>
      </view>
      <view class="menulistitem" @click="$ui.push('/pages/mine/my_team')">
        <view class="Icon Icon1"></view>
        <view class="name">
          我的团队
        </view>
      </view>
      <view class="menulistitem" @click="$ui.push('/pages/mine/setting/renzheng')">
        <view class="Icon Icon1"></view>
        <view class="name">
          实名认证
        </view>
      </view>
      <view class="menulistitem" @click="getfriend">
        <view class="Icon Icon1"></view>
        <view class="name">
          邀请好友
        </view>
      </view>
      <view class="menulistitem" @click="$ui.push('/pages/mine/address/index')">
        <view class="Icon Icon1"></view>
        <view class="name">
          收货地址
        </view>
      </view>
      <view class="menulistitem" @click="$ui.push('/pages/mine/setting/index')">
        <view class="Icon Icon1"></view>
        <view class="name">
          安全设置
        </view>
      </view>
      <view class="menulistitem" @click="$ui.toast('暂未开放')">
        <view class="Icon Icon1"></view>
        <view class="name">
          辅助工具
        </view>
      </view>
      <view class="menulistitem" @click="$ui.push('/pages/cardService/cardNecessary')">
        <view class="Icon Icon1"></view>
        <view class="name">
          卡卷记录
        </view>
      </view>
    </view>

    <!--  -->
    <!-- <view class="content_bottom">
        <view class="record_content">
          <view class="record_content_one" @click="recordOneClick">
            <view class="icon_one"></view>
            <view class="icon_title"></view>
          </view>
          <view class="record_content_two">
            <view class="icon_one"></view>
            <view class="icon_title"></view>
          </view>
          <view class="record_content_three">
            <view class="icon_one"></view>
            <view class="icon_title"></view>
          </view>
        </view>
        <view class="menu_content_one">
          <view class="menu_one" @click="$ui.push('/pages/shop/shoporder')">
            <view class="menu_one_start">

            </view>
            <view class="menu_one_con">
              商城订单
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <view class="menu_two" @click="$ui.push('/pages/mine/kuangji/index')">
            <view class="menu_one_start">

            </view>
            <view class="menu_one_con">
              矿机订单
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <view class="menu_three" @click="$ui.push('/pages/mine/pay_term/index')">
            <view class="menu_one_start">

            </view>
            <view class="menu_one_con">
              我的钱包
            </view>
            <view class="menu_one_end">
            </view>
          </view>
        </view>
        <view class="menu_content_two">
          <view class="menu_one" @click="$ui.push('/pages/mine/address/index')">
            <view class="menu_one_start"></view>
            <view class="menu_one_con">
              地址管理
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <view class="menu_two">
            <view class="menu_one_start">

            </view>
            <view class="menu_one_con">
              我的团队
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <view class="menu_three">
            <view class="menu_one_start">

            </view>
            <view class="menu_one_con">
              卡包记录
            </view>
            <view class="menu_one_end">
            </view>
          </view>
        </view>
        <view class="menu_content_three">
          <view class="menu_one" @click="getfriend">
            <view class="menu_one_start"></view>
            <view class="menu_one_con">
              邀请好友
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <view class="menu_two">
            <view class="menu_one_start">

            </view>
            <view class="menu_one_con">
              实名认证
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <view class="menu_three">
            <view class="menu_one_start">

            </view>
            <view class="menu_one_con">
              辅助工具
            </view>
            <view class="menu_one_end">
            </view>
          </view>
        </view>
        <view class="menu_content_four" @click="$ui.push('/pages/mine/setting/index')">
          <view class="menu_one">
            <view class="menu_one_start"></view>
            <view class="menu_one_con">
              安全设置
            </view>
            <view class="menu_one_end">
            </view>
          </view>
        </view>
      </view> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        statusBarHeight: 0,
        errorImage: ' this.src=" ' + require('@/static/mine/user/touxiang.png') + ' " ',
        name: '',
        phone: '',
        userImage: '',
        list: [],
        button: 0
      }
    },
    methods: {
      backClick() {
        uni.navigateBack()
      },
      recordOneClick() {
        console.log('抢购记录')
        this.$ui.push('/pages/mine/mAdoptingRecord/mAdoptingRecord')
      },
      getfriend() {
        console.log('邀请好友')
        this.$ui.push('/pages/mine/friend/index')
      }
    },
    onLoad() {
      let info = this.$ui.getStorage('userIndex')['user']
      this.name = info.username || 'admin'
      this.phone = info.mobile || '130000'
      this.userImage = info.u_img
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 5;
      this.list = this.$ui.getStorage('userIndex').user
      this.button = this.$ui.getStorage('userIndex').button
    }
  }
</script>

<style scoped lang="less">
  .content {
    width: 100vw;
    height: 100vh;
    position: relative;

    .content_top {
      width: 100%;
      height: 270rpx;
      background-color: rgba(51, 51, 51, 1);
      position: relative;

      .back {
        position: absolute;
        left: 24rpx;
        width: 100rpx; //大小是153px
        height: 100rpx;
        background-image: url('@/static/mine/game/back.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 10;
      }

      // .back {
      //   position: absolute;
      //   left: 24rpx;
      //   width: 16rpx;
      //   height: 28rpx;
      //   background-image: url('@/static/mine/user/back.png');
      //   background-size: 100% 100%;
      //   background-repeat: no-repeat;
      // }

      .face {
        position: absolute;
        top: 173rpx;
        left: 43rpx;
        width: 167rpx;
        height: 207rpx;
        // background-size: 100% 100%;
        // background-repeat: no-repeat;
        border: 1rpx solid #fafafa;
        border-radius: 10rpx;
        z-index: 1;
      }

      .sign {
        position: absolute;
        top: 173rpx;
        left: 233rpx;
        width: 116rpx;
        height: 32rpx;
        background: #E8DBA6;
        border-radius: 15rpx;
        line-height: 32rpx;
        text-align: center;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #67624D;

        image {
          width: 100%;
        }
      }

      // .name {
      //   position: fixed;
      //   top: 158rpx;
      //   left: 157rpx;
      //   font-size: 34rpx;
      //   font-family: PingFang SC;
      //   font-weight: 500;
      //   color: #FFFFFF;
      // }
      .phone {
        position: absolute;
        top: 221rpx;
        left: 235rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FEFEFE;
      }

      .notice {
        position: absolute;
        top: 139rpx;
        right: 21rpx;
        width: 45rpx;
        height: 52rpx;
        background-image: url('@/static/mine/user/tongzhi.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .threeitem {
        position: absolute;
        top: 270rpx;
        right: 0rpx;
        width: 100%;
        height: 130rpx;
        background-color: rgba(255, 255, 255, 1);

        .rightitem3 {
          float: right;
          width: 70%;
          display: flex;

          .item3 {
            flex: 1;
            height: 130rpx;

            .text1 {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #999999;
              text-align: center;
              margin-top: 31rpx;
            }

            .text2 {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
              text-align: center;
              margin-top: 18rpx;
            }
          }
        }
      }
    }

    .list {
      position: absolute;
      top: 422rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 710rpx;
      height: 265rpx;
      background: #FFFFFF;
      border-radius: 8rpx;

      .leftname {
        position: absolute;
        top: 21rpx;
        left: 22rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .rightname {
        position: absolute;
        top: 26rpx;
        right: 21rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
      }

      .item5list {
        position: absolute;
        top: 95rpx;
        width: 100%;
        height: 132rpx;
        display: flex;

        .item {
          flex: 1;

          // background-color: #333333;
          .logo {
            position: relative;
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            background-color: rgb(51, 51, 51);
            margin: 0 auto;
            position: relative;

            .span_jishu {
              position: absolute;
              top: 0;
              right: 0;
              padding: 0rpx 8rpx;
              font-size: 20rpx;
              color: #fff;
              background-color: red;
              border-radius: 50%;
            }

            .Icon {
              position: absolute;
              top: 26rpx;
              left: 50%;
              width: 38rpx;
              height: 28rpx;
              transform: translateX(-50%);
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }

            .Icon1 {
              background-image: url('@/static/mine/user/daifukuan.png');
            }

            .Icon2 {
              background-image: url('@/static/mine/user/daifahuo.png');
            }

            .Icon3 {
              background-image: url('@/static/mine/user/peisong.png');
            }

            .Icon4 {
              background-image: url('@/static/mine/user/pingjia.png');
            }

            .Icon5 {
              background-image: url('@/static/mine/user/tuikuan.png');
            }
          }

          .text {
            font-size: 23rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: center;
            margin-top: 28rpx;
          }
        }
      }
    }

    .menulist {
      position: relative;
      top: 448rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 710rpx;
      padding-bottom: 100rpx;
      min-height: 786rpx;
      background: #FFFFFF;
      border-radius: 8rpx;

      .menulistitem1 {
        width: 100%;
        height: 96rpx;
        border-bottom: 1rpx dashed #515151;
        position: relative;

        // 786/9
        // 87.3333
        // 156 76 + 88
        .text {
          position: absolute;
          top: 28rpx;
          left: 25rpx;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
      }

      .menulistitem {
        width: 684rpx;
        height: 88rpx;
        // line-height: 88rpx;
        margin: 20rpx auto;
        border-bottom: 1rpx solid #eeeeee;
        position: relative;
        display: flex;
        align-items: center;
        background-color: #fff;

        .Icon {
          // vertical-align: middle;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .Icon1 {
          width: 22rpx;
          height: 26rpx;
          background-image: url('@/static/mine/user/zhangdan.png');
        }

        .name {
          margin-left: 21rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    // 
    // 
    .content_bottom {
      position: absolute;
      top: 740rpx;
      width: 100%;

      .record_content {
        width: 670rpx;
        height: 162rpx;
        position: relative;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .record_content_one {
          width: 182rpx;
          height: 162rpx;
          background: #FFFFFF;
          box-shadow: 4rpx 1rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
          border-radius: 21rpx;
          position: relative;

          .icon_one {
            position: absolute;
            top: 20rpx;
            left: 63rpx;
            width: 55rpx;
            height: 70rpx;
            background-image: url('@/static/mine/user/user_index_icon1.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .icon_title {
            position: absolute;
            top: 115rpx;
            left: 28rpx;
            width: 125rpx;
            height: 31rpx;
            background-image: url('@/static/mine/user/qianggoujilu.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .record_content_two {
          width: 182rpx;
          height: 162rpx;
          background: #FFFFFF;
          box-shadow: 4rpx 1rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
          border-radius: 21rpx;
          position: relative;

          .icon_one {
            position: absolute;
            top: 19rpx;
            left: 55rpx;
            width: 72rpx;
            height: 72rpx;
            background-image: url('@/static/mine/user/user_index_icon3.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .icon_title {
            position: absolute;
            top: 116rpx;
            left: 28rpx;
            width: 125rpx;
            height: 30rpx;
            background-image: url('@/static/mine/user/yuyuejilu.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .record_content_three {
          width: 182rpx;
          height: 162rpx;
          background: #FFFFFF;
          box-shadow: 4rpx 1rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
          border-radius: 21rpx;
          position: relative;

          .icon_one {
            position: absolute;
            top: 19rpx;
            left: 55rpx;
            width: 72rpx;
            height: 72rpx;
            background-image: url('@/static/mine/user/user_index_icon2.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .icon_title {
            position: absolute;
            top: 116rpx;
            left: 28rpx;
            width: 125rpx;
            height: 30rpx;
            background-image: url('@/static/mine/user/zhuanrangjilu.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
      }

      .menu_content_one {
        width: 100%;
        height: 216rpx;
        background: #FFFFFF;
        margin-top: 20rpx;

        .menu_one {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu1.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .menu_two {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu2.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/kuangjidingdan.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .menu_three {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu3.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/wodeqianbao.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
      }

      .menu_content_two {
        width: 100%;
        height: 216rpx;
        background: #FFFFFF;
        margin-top: 20rpx;

        .menu_one {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu4.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/dizhiguanli.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .menu_two {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu5.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/wodetuandui.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .menu_three {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu6.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/kabaojilu.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
      }

      .menu_content_three {
        width: 100%;
        height: 216rpx;
        background: #FFFFFF;
        margin-top: 20rpx;

        .menu_one {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu7.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/yaoqinghaoyou.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .menu_two {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu8.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/shimingrenzheng.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .menu_three {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu9.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/fuzhugongju.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
      }

      .menu_content_four {
        width: 100%;
        height: 72rpx;
        background: #FFFFFF;
        margin-top: 20rpx;

        .menu_one {
          height: 72rpx;
          width: 100%;
          position: relative;

          .menu_one_start {
            position: absolute;
            top: 15rpx;
            left: 45rpx;
            width: 33rpx;
            height: 34rpx;
            background-image: url('@/static/mine/user/user_menu10.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .menu_one_con {
            // position: absolute;
            // top: 19rpx;
            // left: 106rpx;
            // width: 118rpx;
            // height: 28rpx;
            // background-image: url('@/static/mine/user/anquanshezhi.png');
            // background-size: 100% 100%;
            // background-size: cover;
            // background-repeat: no-repeat;
            position: absolute;
            top: 15rpx;
            left: 106rpx;
            height: 28rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 540;
            color: #666666;
          }

          .menu_one_end {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 12rpx;
            height: 22rpx;
            background-image: url('@/static/mine/user/user_menu_right.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }
</style>
